import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, Radio, message } from 'antd'
import classnames from 'classnames'
import SameCase from './SameCase'
import ArbitratorList from './ArbitratorList'
import Avoid from './Avoid'
import style from './Index.module.less'
import FinanceArbitratorList from './FinanceArbitratorList'

export default class ArbitratorSelector extends Component {
  state = {
    showModule: '仲裁员列表',
    arbitrator: []
  }

  onChangeHandle (v) {
    this.setState({
      arbitrator: v
    })
  }

  cancelHandle () {
    this.props.hide()
    this.setState({
      arbitrator: []
    })
  }

  decideHandle () {
    if (this.state.arbitrator.length === 0) {
      return message.warning('请选择仲裁员')
    }
    this.props.hide()
    const l = this.state.arbitrator
    const names = l.map(li => li.name)
    const ids = l.map(li => li.id)
    this.props.onChange({ arbitrator: names.join(), arbitratorid: ids.join() })
  }

  // 取消选择
  empty () {
    this.props.hide()
    this.props.onChange({ arbitrator: '', arbitratorid: '' })
  }

  initSelected () {
    const { arbitrator, arbitratorid } = this.props.value
    let names = []
    let ids = []
    if (typeof arbitrator === 'string' && arbitrator.length > 0) {
      names = arbitrator.split(',')
    }
    if (typeof arbitratorid === 'string' && arbitratorid.length > 0) {
      ids = arbitratorid.split(',')
    }
    const list = []
    names.forEach((n, i) => {
      list.push({
        name: n,
        id: ids[i]
      })
    })
    this.setState({
      arbitrator: list
    })
  }

  initShowModel () {
    const d = this.props.caseDetail || {}
    this.setState({
      showModule: d.casetype === '金融案件' ? '金融仲裁员' : '仲裁员列表'
    })
  }

  componentDidUpdate (prev) {
    if (prev.value !== this.props.value) {
      this.initSelected()
    }
    if (!prev.visible && prev.visible) {
      this.initShowModel()
    }
  }

  componentDidMount () {
    this.initSelected()
    this.initShowModel()
  }

  renderFooter () {
    const l = this.state.arbitrator
    const names = l.map(li => li.name).join('、')
    return (
      <div className={style.footer}>
        <span className={style['footer-operate']}>
          <span className={style['footer-label']}>已选择仲裁员：{names || '未选择'}<span style={{ color: 'red' }}>（{l.length}）</span></span>
          {/* <span>（在办2，今年总办22）</span> */}
          {/* <span className={style['footer-notice']}>该仲裁员存在回避情况！</span> */}
        </span>
        <span className={style['footer-operate']}>
          <Button onClick={() => this.empty()}>清空选择</Button>
          <Button onClick={() => this.cancelHandle()}>取消</Button>
          <Button type='primary' onClick={() => this.decideHandle()}>确定</Button>
        </span>
      </div>
    )
  }

  render () {
    const visible = this.props.visible
    const showModule = this.state.showModule
    const num = this.props.num
    return (
      <Modal
        title={`选择${num}名仲裁员`}
        width={1300}
        open={this.props.visible}
        maskClosable={false}
        destroyOnClose
        onCancel={() => this.cancelHandle()}
        footer={this.renderFooter()}
      >
        <div className={style['tab-line']}>
          <Radio.Group onChange={v => this.setState({ showModule: v.target.value })} value={this.state.showModule}>
            <Radio.Button value='仲裁员列表'>仲裁员列表</Radio.Button>
            {/* <Radio.Button value='金融仲裁员'>金融仲裁员</Radio.Button> */}
            <Radio.Button value='类案'>类案</Radio.Button>
            <Radio.Button value='回避'>回避</Radio.Button>
          </Radio.Group>
        </div>
        <div className={this.state.showModule !== '仲裁员列表' ? style.hide : ''}>
          <ArbitratorList visible={visible} value={this.state.arbitrator} caseDetail={this.props.caseDetail} disabledIdList={this.props.disabledIdList} onChange={v => this.onChangeHandle(v)} num={num} />
        </div>
        <div className={classnames({ [style.hide]: showModule !== '金融仲裁员' })}>
          <FinanceArbitratorList visible={visible} value={this.state.arbitratorid} caseDetail={this.props.caseDetail} disabledIdList={this.props.disabledIdList} onChange={v => this.onChangeHandle(v)} />
        </div>
        <div className={this.state.showModule !== '类案' ? style.hide : ''}>
          <SameCase visible={visible} value={this.state.arbitrator} caseDetail={this.props.caseDetail} disabledIdList={this.props.disabledIdList} onChange={v => this.onChangeHandle(v)} />
        </div>
        <div className={this.state.showModule !== '回避' ? style.hide : ''}>
          <Avoid visible={visible} value={this.state.arbitrator} caseDetail={this.props.caseDetail} onChange={v => this.onChangeHandle(v)} />
        </div>
      </Modal>
    )
  }
}

ArbitratorSelector.propTypes = {
  value: PropTypes.object,
  onChange: PropTypes.func,
  visible: PropTypes.bool,
  hide: PropTypes.func,
  caseDetail: PropTypes.object,
  disabledIdList: PropTypes.array,
  num: PropTypes.number
}
ArbitratorSelector.defaultProps = {
  value: { arbitrator: '', arbitratorid: '' },
  onChange: () => {},
  visible: false,
  hide: () => {},
  caseDetail: {},
  disabledIdList: [],
  num: 1
}
